<template>
	<div :class="[prefixCls+'-menu-group']">
		<div :class="[prefixCls+'-menu-group-title']" v-if="title">
			{{ title }}
		</div>
		<ul>
			<slot></slot>
		</ul>
	</div>
</template>

<script>
import { prefixCls } from '../prefix'

export default {
	name: `${prefixCls}MenuGroup`,
	props:{
		title:{
			type:String
		},
	},
	data() {
		return {
			prefixCls: prefixCls,
		}
	},
	methods:{
        //使用$children遍历子组件，得到所有的menuItem组件
        getMenuItem: function() {
            return this.$children.filter(function(item) {
                return item.$options.name === 'menuitem';
            })
        },
		// 导航菜单选中项切换
		changeActive(name){
			this.getMenuItem().forEach(function(item, index) {
				item.active = name
			})
		}
	},
}
</script>